<template>
  <div class="ml-service">
    <div class="service-header">
      <div class="container">
        <h1>机器学习</h1>
        <p class="subtitle">智能数据分析与预测解决方案</p>
      </div>
    </div>

    <div class="service-content">
      <div class="container">
        <section class="features">
          <h2>核心功能</h2>
          <div class="features-grid">
            <div class="feature-card" v-for="feature in features" :key="feature.title">
              <i :class="feature.icon"></i>
              <h3>{{ feature.title }}</h3>
              <p>{{ feature.description }}</p>
            </div>
          </div>
        </section>

        <section class="use-cases">
          <h2>应用场景</h2>
          <div class="cases-grid">
            <div class="case-card" v-for="useCase in useCases" :key="useCase.title">
              <div class="case-icon">
                <i :class="useCase.icon"></i>
              </div>
              <div class="case-content">
                <h3>{{ useCase.title }}</h3>
                <p>{{ useCase.description }}</p>
              </div>
            </div>
          </div>
        </section>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const features = ref([
  {
    icon: 'fas fa-brain',
    title: '预测分析',
    description: '基于历史数据的智能预测，支持多维度数据分析和趋势预测'
  },
  {
    icon: 'fas fa-chart-line',
    title: '数据挖掘',
    description: '深度数据挖掘，发现数据中的隐藏模式和价值'
  },
  {
    icon: 'fas fa-robot',
    title: '智能推荐',
    description: '个性化推荐系统，提供精准的用户画像和商品匹配'
  },
  {
    icon: 'fas fa-cogs',
    title: '自动优化',
    description: '自动化参数调优，提升模型性能和预测准确率'
  }
])

const useCases = ref([
  {
    icon: 'fas fa-chart-pie',
    title: '商业智能',
    description: '销售预测、客户分析、市场趋势分析'
  },
  {
    icon: 'fas fa-user-shield',
    title: '风险控制',
    description: '金融风控、反欺诈、信用评估'
  },
  {
    icon: 'fas fa-bullseye',
    title: '精准营销',
    description: '用户画像、个性化推荐、营销策略优化'
  },
  {
    icon: 'fas fa-industry',
    title: '智能制造',
    description: '设备预测性维护、良品率预测、生产优化'
  }
])
</script>

<style scoped lang="scss">
// 复用相同的样式结构
.ml-service {
  .service-header {
    background: linear-gradient(135deg, var(--primary-color), var(--hover-color));
    padding: 80px 0;
    color: white;
    text-align: center;

    h1 {
      font-size: 2.5rem;
      margin-bottom: 1rem;
    }

    .subtitle {
      font-size: 1.2rem;
      opacity: 0.9;
    }
  }

  // ... 其他样式与 NLP.vue 相同
}
</style> 